<template>
    <div>
      <el-drawer
        v-model="drawer"
        :title="title"
        :size="size"
        :close-on-click-modal="false"
      >
        <div class="body">
          <div class="content">
            <el-form :rules="rules" :model="formInline">
              <el-form-item
                label=" 修改类目名称name："
                prop="className"
              >
                <el-input
                  type="text"
                  class="addClassName"
                  placeholder="请输入修改的类目名称"
                  v-model="formInline.className"
                >
                </el-input>
              </el-form-item>
              <el-form-item  label=" 修改排序order：" prop="classSort">
                <el-input
                  type="text"
                  class="addClassSort"
                  placeholder="请输入排序数值"
                  v-model="formInline.classSort"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="showBtn">
            <el-button type="primary" @click="editImageClass2">{{
              commitText
            }}</el-button>
            <el-button type="primary" @click="close">取消</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script setup>
  // import AddClass from "@/views/imageList/AddClass.vue";
  import { editImageClass } from "@/api/images.js";
  import { ref } from "vue";
  import { reactive } from "vue";
//   const oldName = ref("");
//   const oldOrder = ref("");
  // const formInline1 = ref(null);
  const formInline = reactive({
    className: "",
    classSort: "",
  });
  const rules = reactive({
    className: [
      {
        required: true,
        message: "请输name",
        trigger: "blur",
      },
    ],
    classSort: [
      {
        required: true,
        message: "请输入order",
        trigger: "blur",
      },
    ],
  });
  // const emits = defineEmits(["submit"]);
  defineProps({
    title: {
      type: String,
      default: "",
    },
    size: {
      default: "45%",
    },
    commitText: {
      type: String,
      default: "提交",
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
  });
  
  const drawer = ref(false);
  const open = () => {
    drawer.value = true;
  };
  const close = () => {
    drawer.value = false;
  };
  
  defineExpose({
    open,
    close,
    editImageClass2,
    formInline,
  });
  function editImageClass2() {
    console.log("123123456");
    editImageClass(766,formInline.className, formInline.classOrder)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // console.log(formInline1);
  // console.log(formInline1.className);
  // console.log(formInline1.classSort);
  </script>
  
  <style lang="less" scoped>
  .body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      height: 85%;
      overflow-y: scroll;
    }
  }
  </style>
  